<template>
    <div class="app-container">
        <el-card class="box-card" shadow="never">
            <el-row :gutter="20">
                <el-col :span="2"><el-input size="mini" placeholder="楼宇名称"></el-input>
                </el-col>
                <el-col :span="2"><el-input size="mini" placeholder="楼宇名称"></el-input>
                </el-col>
                <el-col :span="2"><el-input size="mini" placeholder="楼宇名称"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" size="mini" @click="handleSeach()">查询</el-button></el-col>
            </el-row>
        </el-card>
        <!-- :span-method="objectSpanMethod" -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit
            style="margin-top: 1%; font-size: 13px">
            <el-table-column label="客户姓名" align="center" width="150">
                <template slot-scope="scope">
                    {{ scope.row.startYears }}.{{ scope.row.startMonths }} -
                    {{ scope.row.endYears }}.{{ scope.row.endMonths }}
                </template>
            </el-table-column>

            <el-table-column label="联系方式" align="center" width="150">
                <template slot-scope="scope">
                    {{ scope.row.industry }}
                </template>
            </el-table-column>

            <el-table-column label="推荐人" align="center" width="150">
                <template slot-scope="scope">
                    {{ scope.row.industryName }}
                </template>
            </el-table-column>

            <el-table-column label="谈判人" align="center" width="150">
                <template slot-scope="scope">
                    {{ scope.row.industryCode }}
                </template>
            </el-table-column>

            <el-table-column label="谈判人" align="center" width="150">
                <template slot-scope="scope">
                    {{ scope.row.productName }}
                </template>
            </el-table-column>

            <el-table-column label="谈判人" align="center" width="150">
                <template slot-scope="scope">
                    {{ scope.row.productPrice }}
                </template>
            </el-table-column>

            <el-table-column type="expand">
                <template #default="props">
                    <div class="sub-table">
                        <el-table :data="props.row.children" style="width: 100%" border>
                            <el-table-column prop="name" label="子级名称" />
                            <el-table-column prop="age" label="年龄" />
                            <el-table-column prop="address" label="地址" />
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <!-- 
        <el-table-column label="谈判人" align="center" width="700">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.talList"
              height="250"
              border
              style="width: 100%"
            >
              <el-table-column prop="accessoryName" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="accessoryNature" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="accessoryCategory" label="地址">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column> -->

            <el-table-column align="center" prop="created_at" label="操作" width="240">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleDetails(scope.row.id)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="
          text-align: center;
          border: 1px solid #eee;
          text-align: center;
          border-top: 0px;
        ">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[10, 15, 20, 30]" :page-size="where.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"
                style="line-height: 50px; align-items: center">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { getSupplySideIndustryList } from "@/api/custom";

    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: "success",
                    draft: "gray",
                    deleted: "danger",
                };
                return statusMap[status];
            },
        },
        data() {
            return {
                list: null,
                listLoading: true,
                currentPage4: 1,
                where: {
                    pageSize: 10,
                    currentPage: 1,
                    data: {
                        state: "",
                        reference: "",
                        negotiator: "",
                        customName: "",
                        customPhone: "",
                        isIncreaseWX: "",
                        isToStore: "",
                    },
                },

                total: 0,
            };
        },
        created() {
            this.fetchData(this.where);
        },
        methods: {
            fetchData(obj) {
                this.listLoading = true;
                getSupplySideIndustryList(obj)
                    .then((response) => {
                        console.log(response);
                        this.listLoading = false;
                        this.list = response.data;
                        this.total = response.count;
                    })
                    .catch((error) => {
                        this.listLoading = false;
                    });
            },
            handleSeach() {
                this.fetchData(this.where);
            },
            handleSizeChange() { },
            handleCurrentChange() { },
            handleDetails(id) {
                window.open(
                    this.$router.resolve({ path: "/customer/Demanddetails", query: { id: id } })
                        .href,
                    "_blank"
                );
            },

            handleLease() {
                console.log("handleLease");
                this.$router.push({ name: "LeaseRoom" });
            },
            // 自定义的合并表格排序
            columnSort(sortType, item) {
                let str = sortType + "ending";
                let sortTypeCopy = sortType;
                this.theadList.forEach((ite) => {
                    if (ite.name == item.name) {
                        if (ite.activeClass == str) {
                            ite.activeClass = "";
                            sortTypeCopy = "";
                        } else {
                            ite.activeClass = str;
                        }
                    } else {
                        ite.activeClass = "";
                    }
                });
                this.searchForm.sortName = item.prop;
                this.searchForm.sortOrder = sortTypeCopy;
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                console.log(columnIndex);
                console.log(rowIndex);
                if (columnIndex === 0) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1,
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0,
                        };
                    }
                }
            },
        },
    };
</script>